<template>
  <div class="newsinfo-container">
    <h3 class="title">{{ newsinfo.title}}</h3>
    <p class="subtitle">
      <span>发表时间:{{ newsinfo.add_time | dateFormat }}</span>
      <span>点击：{{ newsinfo.click }} 次</span>
    </p>

    <hr>
    <!-- 内容区域 -->
    <div class="content" v-html="newsinfo.content"></div>
    <!--
       评论的子组件区域
       :id="this.id这是父组件向子组件传值
       在comment.vue中script定义一个props['id']才可以用
     -->
    <comment-box :id="this.id"></comment-box>
  </div>
</template>
<script>
//这是导入评论子组件
import comment from '../subcomponents/comment.vue'
export default {
  data(){
    return {
      id: this.$route.params.id, //这是讲URL 中传递过来的 ID值  ，挂载到data上，方便以后调用
      newsinfo:{}
    }
  },
  created(){
    this.getNewsInfo()
  },
  methods:{
    getNewsInfo(){//获取新闻详情
      this.$http.get('api/getnew/' + 'this.id').then(result =>{
        if(result.body.status === 0){
          this.newsinfo = result.body.message[0]
        }else{
          Toast('获取新闻失败')
        }
      })
    }
  },
  components:{//用来注册的子组件的节点
    'comment-box': comment
  }
}
</script>
<style lang="scss">
  .newsinfo-container{
    padding: 0 4px;
    .title{
      font-size: 16px;
      text-align: center;
      margin: 15px 0;
      color: red;
    }
    .subtitle{
      font-size: 13px;
      color: #226aff;
      display: flex;
      justify-content: space-between;
    }
    .content{
      img{//图片显示的不完全，这样设置之后不会起作用，去掉scoped，这样并不会产生全局污染，因为所有的样式都是在 .newsinfo-container中设置的
        width: 100%;
        height: 100%;
      }
    }
  }
</style>


